<!-- 新增用户权限 -->
<template>
  <div class="additional">
    <div class="role-icon">
      <i class="iconfont">&#xe62e;</i>
      <span>新增用户权限</span>
      <p class="role-p">请填写信息</p>
    </div>
    <!-- 基本信息 -->
    <div class="role-basic">
      <el-form
        :model="dynamicValidateForm"
        ref="dynamicValidateForm"
        label-width="100px"
        class="demo-dynamic"
        status-icon
        :rules="rules"
      >
        <div style="display: flex; justify-content: center;">
          <div>
            <el-form-item
              label="父级权限："
              prop="pid"
              autocomplete="off"
              :rules="[{ required: true, message: '父级权限不能为空', trigger: 'blur' }]"
            >
              <el-select v-model="parent" placeholder="请选择">
                <el-option
                  v-for="item in parentroles"
                  :key="item.id"
                  :label="item.name"
                  :value="item.pid"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="名称："
              prop="name"
              autocomplete="off"
              :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
            >
              <el-input v-model="dynamicValidateForm.name"></el-input>
            </el-form-item>
            <el-form-item
              label="权限值："
              prop="description"
              autocomplete="off"
              :rules="[{ required: true, message: '请输入权限值', trigger: 'blur' }]"
            >
              <el-input v-model="dynamicValidateForm.description"></el-input>
            </el-form-item>
            <el-form-item prop="adminCount" label="图标：">
              <el-input v-model="dynamicValidateForm.adminCount"></el-input>
            </el-form-item>
          </div>
          <div style="margin-left: 30px;">
            <el-form-item
              label="权限类型："
              prop="createTime"
              autocomplete="off"
              :rules="[{ required: true, message: '请选中权限类型', trigger: 'blur' }]"
            >
              <el-select v-model="power" placeholder="请选择">
                <el-option
                  v-for="item in potence"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="状态："
              prop="status"
              autocomplete="off"
              :rules="[{ required: true, message: '状态不能为空', trigger: 'blur' }]"
            >
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="排序："
              prop="sort"
              autocomplete="off"
              :rules="[{ required: true, message: '请输入序号', trigger: 'blur' }]"
            >
              <el-input v-model="dynamicValidateForm.sort"></el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item style="display: flex; justify-content: center;margin-top: 30px;">
          <el-button
            icon="el-icon-upload2"
            size="small"
            type="primary"
            @click="submitForm('dynamicValidateForm')"
          >提交</el-button>
          <el-button icon="el-icon-back" size="small" @click="resetForm()">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  components: {},
  props: {},
  data() {
    return {
      // 父级权限id
      parent: "",
      parentroles: [],
      // 状态
      value: "",
      options: [{ value: 0, label: "禁用" }, { value: 1, label: "启用" }],
      // 权限类型
      power: "",
      potence: [
        { value: 0, label: "目录" },
        { value: 1, label: "菜单" },
        { value: 2, label: "按钮" }
      ],
      dynamicValidateForm: {
        name: "", // 名称
        description: "", // 权限值
        adminCount: "", // 后台数量
        createTime: "", // 创建时间
        sort: "", // 排序
        status: 0, // 状态
        createTime: 0, // 权限类型
        pid: 0 // 父级权限
      }
    };
  },
  watch: {},
  computed: {
    ...mapGetters(["rolesparent"])
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var addroles = {
            pid: this.parent,
            name: this.dynamicValidateForm.name,
            value: this.dynamicValidateForm.description,
            icon: "",
            type: this.power,
            status: this.value,
            sort: this.dynamicValidateForm.sort
          };
          this.$store
            .dispatch("Additroles", addroles)
            .then(data => {
              this.$message({
                type: "success",
                message: "权限新增成功!"
              });
              this.$refs[formName].resetFields(); // 重置信息
              this.$router.replace({ name: "unauthorized" });
            })
            .catch(error => {
              this.$notify.error({
                title: "权限新增失败",
                message: `${error}`
              });
              console.log("请求失败：" + error);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 返回上一级
    resetForm() {
      this.$router.replace({ name: "unauthorized" });
    }
  },
  created() {
    this.$store
      .dispatch("managementop")
      .then(data => {
        this.parentroles = data.list;
      })
      .catch(error => {
        console.log("请求失败：" + error);
      });
  },
  mounted() {}
};
</script>
<style scoped>
.role-icon {
  display: flex;
  height: 50px;
  text-align: left;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
}
.role-icon span {
  font-size: 14px;
}
.role-p {
  color: #6379bb;
  font-size: 14px;
  margin-left: 15px;
}
.iconfont {
  margin-left: 15px;
  margin-right: 5px;
  font-size: 18px;
}
.role-basic {
  margin-top: 20px;
}
</style>